<template>
    <el-card class="box-card">
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="label" label="原数据字段">
                    <template slot-scope="scope">
                        <template v-if="scope.row.prop !== 'operation'">
                            {{scope.row.label}}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="新数据字段">
                    <template slot-scope="scope">
                        <template v-if="scope.row.prop !== 'operation'">
                            <el-input v-model="tableData[scope.$index].newLabel" :placeholder="scope.row.label"></el-input>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </div>
       
        <div solt="footer">
            
            <div class="import-footer">
                <div class="upload-wrap">
                    <el-button type="primary"   icon="el-icon-upload2">
                        导入文件
                        <input type="file" class="form-control uplode-input" id="file"   @change="checkImport" />
                    </el-button>
                </div>
            </div>
        </div>
    </el-card>
</template>
<script>
import XLSX from 'xlsx'
export default {
    props:{
        data:{
            type:Array,
            default:()=>[]
        }
    },
    data(){
        return {
            tableData:this.data,
            listData:[]
        }
    },
    watch: {
        data(val) {
            this.tableData = val
        },
    },
    methods:{
        checkImport(option){
            var that = this;
            that.listData = [];
            const files = option.target.files;
            const reader = new FileReader();
            
            reader.onload = (e) => {
                /* Parse data */
                const bstr = e.target.result;
                
                const wb = XLSX.read(bstr, {type:'binary'});
                /* Get first worksheet */
                const wsname = wb.SheetNames[0];
                const ws = wb.Sheets[wsname];
                /* Convert array of arrays */
                const data = XLSX.utils.sheet_to_json(ws, {header:1});
                if(data.length < 1) {
                    that.$message({
                        message: '文件数据解析错误或者为空文件',
                        type: 'error'
                    });
                    return false;
                }
                that.tableData.forEach((item)=>{
                    data[0].forEach((elem,inx)=>{
                        if(item.newLabel && item.newLabel == elem) {
                            item.inxd = inx;
                        }else if(item.label == elem){
                            item.inxd = inx;
                        }
                    })
                });
                
                for(var i=1; i<data.length; i++) {
                    var obj = {};
                    that.tableData.forEach((item)=>{
                        if(item.prop !== 'operation') {
                            if(item.inxd || item.inxd === 0) {
                                var val = data[i][item.inxd];
                                if(item.type == 'buttons') {
                                    item.children.forEach((elem)=>{
                                        
                                        if(val == elem.props.value){
                                            val =  elem.props.ifValue.replace(/[^\d]/g,'') 
                                        }
                                    });
                                }
                                obj[item.prop] = val;
                                
                                
                            }else{
                                obj[item.prop] = '';
                            }
                        }
                        
                    });

                    var flag = false;
                    for(var j in obj) {
                        if(obj[j]) {
                            flag = true;
                        }
                    }

                    if(flag == true) {
                        that.listData.push(obj);
                    }
                }
                that.$emit('click',that.listData,that.$attrs);
            };
            reader.readAsBinaryString(files[0]);
        }
    }
}
</script>

<style scoped>
.import-footer{
    text-align: right;
    padding: 20px;
}
.upload-wrap{
  position: relative;
  display:inline-block;
}
.uplode-input{
    text-indent: 99999px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
    z-index: 100;
    opacity: 0;
}
</style>